<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="/skin/css/amazeui.min1.css" />
<link href="/skin/font/iconfont.css" rel="stylesheet" type="text/css" />
<link href="/skin/css/index.css" rel="stylesheet" type="text/css" />
<script src="/user/js/jquery.js"></script>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>优惠券-会员中心</title>
<style>
/* 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值 */
body { background: #f5f7fb; }
a{-webkit-tap-highlight-color:transparent;outline:none;}

/* 标签页 */
.tabs-wrapper {
	margin: 0.1rem 0.2rem 0;
}
.tabs {
	display: flex;
	padding: 0 0.2rem;
}
.tab-item {
	flex: 1;
	text-align: center;
	padding: 0.14rem 0;
	font-size: 0.15rem;
	color: #94a3b8;
	position: relative;
	cursor: pointer;
	transition: all 0.3s;
	font-weight: 400;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	outline: none;
}
.tab-item.active {
	color: #1e293b;
	font-weight: 600;
}
/* 内容区域 */
.tab-content {
	margin: 0.2rem;
	margin-top: 0;
}
.tab-panel {
	display: none;
}
.tab-panel.active {
	display: block;
}

/* 优惠券列表 */
.coupon-list {
	display: flex;
	flex-direction: column;
	gap: 0.16rem;
	padding: 0.08rem 0;
}

/* 优惠券卡片 */
.coupon-card {
	background: #fff;
	border-radius: 0.08rem;
	box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.08);
	display: flex;
	overflow: visible;
	position: relative;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

/* 优惠券缺口 - 上方 */
.coupon-card::before {
	content: '';
	position: absolute;
	left: 1rem;
	top: -0.06rem;
	width: 0.12rem;
	height: 0.12rem;
	background: #f5f7fb;
	border-radius: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

/* 优惠券缺口 - 下方 */
.coupon-card::after {
	content: '';
	position: absolute;
	left: 1rem;
	bottom: -0.06rem;
	width: 0.12rem;
	height: 0.12rem;
	background: #f5f7fb;
	border-radius: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

/* 左侧金额区域 */
.coupon-left {
	width: 1rem;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.16rem 0;
	position: relative;
	border-right: 0.01rem dashed #e2e8f0;
	border-radius: 0.08rem 0 0 0.08rem;
}
.coupon-amount {
	display: flex;
	align-items: baseline;
	color: #345643;
}
.coupon-currency {
	font-size: 0.14rem;
	font-weight: 600;
	margin-right: 0.06rem;
}
.coupon-value {
	font-size: 0.4rem;
	font-weight: 600;
	line-height: 1;
}
.coupon-desc {
	font-size: 0.12rem;
	color: #345643;
	margin-top: 0.04rem;
}

/* 右侧详情区域 */
.coupon-right {
	flex: 1;
	padding: 0.16rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.coupon-title {
	font-size: 0.16rem;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 0.06rem;
}
.coupon-validity {
	font-size: 0.12rem;
	color: #b0b0b0;
	margin-bottom: 0.04rem;
}
.coupon-limit {
	font-size: 0.12rem;
	color: #b0b0b0;
}
.coupon-action {
	display: flex;
    justify-content: space-between;
    align-items: end;
	margin-top: 0.15rem;
}
.coupon-btn {
	background: #345643;
    color: #fff;
    padding: 0.04rem 0.14rem;
    border-radius: 0.25rem;
    font-size: 0.12rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.coupon-btn:hover {
	background: #0d442a;
}
.coupon-btn.used {
	background: #94a3b8;
	cursor: not-allowed;
}
.coupon-btn.claimed {
	background: #cbd5e1;
	color: #64748b;
	cursor: default;
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 0.8rem 0;
	color: #94a3b8;
	font-size: 0.14rem;
}

/* 已使用的优惠券样式 */
.coupon-card.used {
	opacity: 0.6;
}
.coupon-card.used .coupon-amount {
	color: #94a3b8;
}
.coupon-card.used .coupon-desc {
	color: #94a3b8;
}
</style>
</head>
<body class="cart">
<header id="header">
	<section class="head-b head-b1">
		<span class="u-left"><a href="javascript:history.go(-1);" class="back"><img src="/skin/img/back.png"></a></span>
		<h1 id="t0">优惠券</h1>
		<div class="u-right" href="#">
			<a href="/" class="hSearch right"><img src="/skin/img/i_home.png"></a>
		</div>
	</section>
</header>

<!-- 标签页 -->
<div class="tabs-wrapper">
	<div class="tabs">
		<div class="tab-item active" data-tab="available">领券</div>
		<div class="tab-item" data-tab="my-coupons">我的券</div>
	</div>
</div>

<!-- 内容区域 -->
<div class="tab-content">
	<!-- 领券 -->
	<div class="tab-panel active" id="available">
		<div class="coupon-list">
			{loop $available_coupons $key as $list}
			<div class="coupon-card">
				<div class="coupon-left">
					<div class="coupon-amount">
						<span class="coupon-currency">¥</span>
						<span class="coupon-value">{$list[amount]}</span>
					</div>
					<div class="coupon-desc">{$list[description]}</div>
				</div>
				<div class="coupon-right">
					<div>
						<div class="coupon-title">{$list[title]}</div>
						<div class="coupon-validity">有效期: {$list[start_date]}-{$list[end_date]}</div>
					</div>
					<div class="coupon-action">
						<div class="coupon-limit">{$list[limit]}</div>
						{if($list['status']==0)}
						<button class="coupon-btn" onclick="claimCoupon({$list[id]})">领取</button>
						{else}
						<span class="coupon-btn claimed">已领取</span>
						{/if}
					</div>
				</div>
			</div>
			{/loop}
		</div>
	</div>
	
	<!-- 我的券 -->
	<div class="tab-panel" id="my-coupons">
		<div class="coupon-list">
			{loop $my_coupons $key as $list}
			<div class="coupon-card {if($list['used']==1)}used{/if}">
				<div class="coupon-left">
					<div class="coupon-amount">
						<span class="coupon-currency">¥</span>
						<span class="coupon-value">{$list[amount]}</span>
					</div>
					<div class="coupon-desc">{$list[description]}</div>
				</div>
				<div class="coupon-right">
					<div>
						<div class="coupon-title">{$list[title]}</div>
						<div class="coupon-validity">有效期: {$list[start_date]}-{$list[end_date]}</div>
					</div>
					<div class="coupon-action">
						<div class="coupon-limit">{$list[limit]}</div>
						{if($list['used']==1)}
						<span class="coupon-btn used">已使用</span>
						{else}
						<button class="coupon-btn" onclick="useCoupon({$list[id]})">立即使用</button>
						{/if}
					</div>
				</div>
			</div>
			{/loop}
		</div>
	</div>
</div>

<script>
// 标签页切换
$(function() {
	$('.tab-item').click(function() {
		var tab = $(this).data('tab');
		$('.tab-item').removeClass('active');
		$(this).addClass('active');
		$('.tab-panel').removeClass('active');
		$('#' + tab).addClass('active');
	});
});

// 领取优惠券
function claimCoupon(couponId) {
	$.ajax({
		type: "post",
		dataType: "json",
		url: "/Moudelu.php?m=m&a=claim_coupon",
		data: "id=" + couponId,
		success: function(d) {
			if(d[0] == 2) {
				window.location.href = 'login.php';
				return;
			}
			if(d[0] == 0) {
				alert(d[1]);
			} else {
				alert('领取成功！');
				window.location.reload();
			}
		}
	});
}

// 使用优惠券
function useCoupon(couponId) {
	alert('跳转到使用优惠券页面，优惠券ID: ' + couponId);
	// 这里可以添加跳转到商品列表或订单页面的逻辑
}

// 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值
(function(){
	var docEl = document.documentElement;
	var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
	function recalc() {
		var clientWidth = docEl.clientWidth;
		if (!clientWidth) return;
		docEl.style.fontSize = (clientWidth / 375 * 100) + 'px';
	}
	if (!document.addEventListener) return;
	window.addEventListener(resizeEvt, recalc, false);
	document.addEventListener('DOMContentLoaded', recalc, false);
	recalc();
})();
</script>
</body>
</html>

